<template>
  <div class="UserDetail">
    <div class="pep">
      <el-row>
        <el-col :span="24">
          <span>个人信息</span>
          <span>（已停用）</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <span>头像：</span>
          <span>33</span>
        </el-col>
        <el-col :span="4">
          <span>手机号：</span>
          <span>33</span>
        </el-col>
        <el-col :span="4">
          <span>个人订单金额：</span>
          <span>33</span>
        </el-col>
        <el-col :span="4">
          <span>累计收益：</span>
          <span>33</span>
        </el-col>
        <el-col :span="8">
          <span>淘宝账号：</span>
          <span>33</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <span>用户名：</span>
          <span>33</span>
        </el-col>
        <el-col :span="4">
          <span>等级：</span>
          <span>33</span>
        </el-col>
        <el-col :span="4">
          <span>积分：</span>
          <span>33</span>
        </el-col>
        <el-col :span="4">
          <span>即将到账：</span>
          <span>33</span>
        </el-col>
        <el-col :span="8">
          <span>支付宝账号：</span>
          <span>33</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-button type="primary" @click="onSubmit">重置用户密码</el-button>
          <el-button type="primary" @click="onSubmit">停用</el-button>
          <el-button type="primary" @click="onSubmit">设置为"优粉团"</el-button>
        </el-col>
        <el-col :span="8">
          <span>用户注册时间：</span>
          <span>33</span>
        </el-col>
      </el-row>
    </div>
    <div class="team">
      <el-row>
        <el-col :span="24">
          <span>团队信息</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>一级粉丝总数(优钻石粉/金粉/银粉)：</span>
          <span>222</span>
        </el-col>
        <el-col :span="12">
          <span>团队订单数（一级订单数/二级订单数/二级以外订单数）：</span>
          <span>333</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>二级粉丝总数(优钻石粉/金粉/银粉)：</span>
          <span>333</span>
        </el-col>
        <el-col :span="12">
          <span>团队订单金额（一级订单金额/二级订单金额/二级以外订单金额）：</span>
          <span>333</span>
        </el-col>
      </el-row>
    </div>
    <div class="order">
      <el-row>
        <el-col :span="24">
          <p class="title">
            <span>订单信息</span>
            <span>更多订单信息>></span>
          </p>
        </el-col>
      </el-row>
      <el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="订单号"></el-table-column>
          <el-table-column prop="date" label="平台"></el-table-column>
          <el-table-column prop="address" label="订单状态"></el-table-column>
          <el-table-column prop="address" label="订单所属"></el-table-column>
          <el-table-column prop="address" label="订单时间"></el-table-column>
          <el-table-column prop="address" label="预计佣金"></el-table-column>
          <el-table-column prop="address" label="预计到账时间"></el-table-column>
        </el-table>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserDetail",
  components: {},
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      sizeForm: {
        name: ""
      }
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style lang='scss'>
.UserDetail {
  .team {
    margin: 20px 0;
  }
  .order {
    .title {
      margin: 0;
      display: flex;
      justify-content: space-between;
    }
  }
  .el-row {
    border: 1px solid #ccc;
    &:first-child{
       .el-col{
        background: #f2f2f2;
      }
    }
    .el-col {
      padding: 20px;
      border-right: 1px solid #ccc;
    }
  }
}
</style>